<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="home" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta charset="utf-8" />
<title>登录界面</title>
<link rel="stylesheet" href="${home}/assets/libs/layui/css/layui.css" />
<link rel="stylesheet" href="${home}/assets/css/login.css" media="all" />
<style type="text/css">
#canvas {
	border: 1px solid #ccc;
	border-radius: 5px;
	margin-top: 2px;
	margin-left: 10px;
	cursor: pointer;
}
</style>
</head>
<body>

	<div class="login-wrapper">
		<div class="login-body">
			<div class="layui-card">
				<div class="layui-card-header">
					<i class="layui-icon layui-icon-engine"></i>&nbsp;&nbsp;登录
				</div>
				<form class="layui-card-body layui-form layui-form-pane"
					id="login-form" lay-filter="login-form" action="" method="">
					<div class="layui-form-item">
						<label class="layui-form-label"><i
							class="layui-icon layui-icon-user"></i></label>
						<div class="layui-input-block">
							<input name="userName" type="text" lay-verify="required"
								placeholder="用户名" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label"><i
							class="layui-icon layui-icon-password"></i></label>
						<div class="layui-input-block">
							<input name="password" type="password" lay-verify="required"
								placeholder="密码" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label"><i
							class="layui-icon layui-icon-vercode"></i></label>
						<div class="layui-input-block">
							<div class="layui-row inline-block">
								<div class="layui-col-xs7">
									<input name="code" type="text" lay-verify="required"
										placeholder="验证码" class="layui-input" id="Txtidcode">
								</div>
								<div class="layui-col-xs5" style="padding-left: 10px;">
									<img id="captcha_img" alt="点击更换" title="点击更换"
										onclick="changeVerifyCode(this)"
										src="${home}/api/admin/sys/login/code.do" />
								</div>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<button type="submit" lay-filter="login-submit"
							class="layui-btn layui-btn-fluid" lay-submit>登录</button>
					</div>
				</form>
			</div>
		</div>
		<div class="login-footer">
			<p>
				Copyright &right; <a href="javascript:;" target="_blank">
					Innovation Product All Rights Reserved | Engine By Innovation
					Product</a>
			</p>
		</div>
	</div>
	<script type="text/javascript" src="${home}/assets/js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="${home}/assets/libs/layui/layui.js"></script>
	<script type="text/javascript" src="${home}/assets/libs/layui/layui.all.js"></script>
	<script src="${home}/assets/js/login.js"></script>
	<script>
		function changeVerifyCode(img) {
			img.src = "${home}/api/admin/sys/login/code.do?"
					+ Math.floor(Math.random() * 10000);
		}

		$('#login-form').attr('method', 'POST');

		layui.use(['layer', 'form'],
				function() {
				    var layer = layui.layer,
				    form = layui.form;

				    // 表单提交事件
				    form.on('submit(login-submit)',
				    function(data) {
				        layer.load(2);
				        
				        console.log(data.field);
				        
				        $.ajax({

				            type: "POST",
				            url: "${home}/api/admin/sys/login/login.do",
				            data: JSON.stringify(data.field),
				            dataType: "json",
				            contentType: "application/json; charset=utf-8",
				            success: function(data) {
				                if (data.code == 200) {
				                    layer.msg(data.msg, {
				                        icon: 1,
				                        time: 2000
				                    },function(){
				                    	window.location.href = " ${home}/api/admin/sys/login/test.do";
				                    });
				                } else {
				                    var src = "${home}/api/admin/sys/login/code.do?" + Math.floor(Math.random() * 10000);
				                    $('#captcha_img').attr('src', src);
				                    layer.msg(data.msg, {
				                        icon: 2,
				                        time: 2000
				                    },function(){
				                    	window.parent.location.href = " ${home}/login.jsp";
				                    	window.location.reload();
				                    });
				                }
				            },
				            error: function(data) {}
				        });
				        layer.closeAll();
				        return false;
				    },
				    $('#login-form').attr('method'));

				});
	</script>
</body>
</html>